<!-- 公共弹窗 弹窗内容 1、复杂内容通过富文本传递 2、简单内容通过插槽传递 -->
<template>
	<uni-popup ref="gzPopupRef" type="center" :animation="false" :mask-click="false">
		<view class="dialog">
			<view class="title" :style="{ backgroundImage: `url(${props.titleBg.src})`, height: props.titleBg.h }">
			</view>
			<view class="content">
				<slot>
					<view v-html="props.rawHtml"></view>
				</slot>
			</view>
			<button class="btn" :style="{ backgroundImage: `url(${props.btnBg.src})` }" plain @click="onClick">确认</button>
		</view>
	</uni-popup>
</template>

<script setup>
	import { defineExpose, defineProps, ref, defineEmits } from 'vue'
	
	// 公共弹窗实例
	const gzPopupRef = ref()
	// 外部属性
	const props = defineProps({
		// 弹窗富文本内容
		rawHtml: {
			type: String,
			default: ''
		},
		titleBg: {
			type: Object,
			default: {
				src: "https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/95271f84-3a46-48d5-a0f8-5cbabb6af0d9.png",
				h: "240rpx"
			}
		},
		btnBg: {
			type: Object,
			default: {
				src: "https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f1dc6f4b-ec7c-4521-8637-41791098fdb1.png",
			}
		}
	})
	// 自定义事件
	const emits = defineEmits(['onConfirm'])
	
	// 点击确认按钮
	function onClick(){
		close()	// 关闭弹窗
		emits('onConfirm','click')
	}
	
	// 弹窗打开事件
	const open = () => {
		gzPopupRef.value.open()
	}
	// 弹窗关闭事件
	const close = () => {
		gzPopupRef.value.close()
	}
	// 暴露弹窗开启关闭事件
	defineExpose({ open, close })
</script>

<style lang="less" scoped>
	.dialog{
		width: 620rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 40rpx;
		overflow: hidden;
		.title{
			width: 100%;
			height: 240rpx;
			background-repeat: no-repeat;
			background-position: left top;
			background-size: 100% 100%;
		}
		.content{
			padding: 36rpx;
			min-height: 110rpx;
			display: flex;
			align-items: center;
		}
		.btn{
			border: none;
			color: #fff;
			width: 260rpx;
			height: 90rpx;
			line-height: 80rpx;
			padding: 0;
			background-repeat: no-repeat;
			background-position: left top;
			background-size: 100% 100%;
			margin-bottom: 36rpx;
		}
	}
</style>